<template>
<div>
<el-container>
  <el-header>
    <div>
    <el-avatar type="primary" v-if="role === '管理员登录'" style="position:absolute;left:0.5%;top:1.5%;margin-left: 16px" @click.native="info()">
      {{role}}
    </el-avatar>
    <el-avatar type="primary" v-if="role != '管理员登录'" style="position:absolute;left:0.5%;top:1.5%;margin-left: 16px" @click.native="info()">
      <img :src="user.avator"/>
    </el-avatar>
      宿舍打分管理系统
    </div>
  </el-header>

  <!-- 管理页面主页 -->
  <el-container>


    <!-- 侧边栏部分 -->
    <el-aside width="15%">
        <el-menu>

            <!-- 管理员登录页面 -->
            <el-submenu index="1" v-if="role === '管理员登录'">
                <template slot="title"><span class="banner">管理员端</span></template>
                <el-menu-item index="1-1" @click="routerTo('1-1')">管理员管理</el-menu-item>
                <el-menu-item index="1-2" @click="routerTo('1-2')">宿舍长管理</el-menu-item>
                <el-menu-item index="1-2" @click="routerTo('1-3')">老师管理</el-menu-item>
                <el-menu-item index="1-3" @click="routerTo('1-4')">宿管管理</el-menu-item>
                <el-menu-item index="1-4" @click="routerTo('1-5')">学生会管理</el-menu-item>
                <el-menu-item index="1-5" @click="routerTo('1-6')">宿舍管理</el-menu-item>
            </el-submenu>

            <!-- 老师登录页面 -->
            <el-submenu index="2"  v-if="role === '老师登录'">
                <template slot="title"><span class="banner">教师端</span></template>
                <el-menu-item index="2-1" @click="routerTo('2-1')">宿舍列表</el-menu-item>
            </el-submenu>

            <!-- 宿舍长登录页面 -->
            <el-submenu index="3"  v-if="role === '宿舍长登录'">
                <template slot="title"><span class="banner">学生端</span></template>
                <el-menu-item index="2-1" @click="routerTo('3-1')">我的宿舍</el-menu-item>
            </el-submenu>

            <!-- 宿管登录页面 -->
            <el-submenu index="3"  v-if="role === '宿管登录'">
                <template slot="title"><span class="banner">管理端</span></template>
                <el-menu-item index="2-1" @click="routerTo('4-1')">宿舍列表</el-menu-item>
            </el-submenu>

            <!-- 学生会登录页面 -->
            <el-submenu index="3"  v-if="role === '学生会登录'">
                <template slot="title"><span class="banner">管理端</span></template>
                <el-menu-item index="2-1" @click="routerTo('5-1')">宿舍列表</el-menu-item>
            </el-submenu>

        </el-menu>
    </el-aside>


    <!-- 页面主体 -->
    <el-main>


      <!-- 抽屉部分，个人信息 -->
       <!-- 个人详情 -->
        <el-drawer
        :visible.sync="drawer" 
        direction="ltr"	 
        title="I am the title" 
        :with-header="false"
        style="font-size:12px;"
        > 

        <!-- 头像 -->
        <el-row :gutter="20">
         <el-col :span="9">

           <!-- 其他用户显示头像 -->
           <el-avatar style="margin-top:20px;margin-left:10px;" :size="60" v-if="role != '管理员登录'">
              <img :src="user.avator"/>
           </el-avatar>

            <!-- 管理员显示文字 -->
           <el-avatar style="margin-top:20px;margin-left:10px;" :size="60" v-if="role === '管理员登录'">
              管理员
           </el-avatar>

         </el-col>
        </el-row>

        <!-- 客户名称 -->
        <el-row :gutter="20">
         <el-col :span="9"  style="margin-top:20px;margin-left:10px;" >
             用户名称：
         </el-col>
         <el-col :span="12" style="margin-top:20px;margin-left:10px;">
             {{user.username}}
         </el-col>
        </el-row>

        <!-- 客户邮箱 -->
        <el-row :gutter="20">
         <el-col :span="9" style="margin-top:20px;margin-left:10px;">
             用户邮箱：
         </el-col>
         <el-col :span="12">
             {{user.email}}
         </el-col>
        </el-row>

        <!-- 修改信息 -->
        <el-row :gutter="20">
         <el-col :span="9" style="margin-top:20px;margin-left:10px;">
             修改信息：
         </el-col>
         <el-col :span="12" style="margin-top:20px;margin-left:10px;">
             <el-button type="mini" @click="update()">修改个人信息</el-button>
         </el-col>
        </el-row>

        <!-- 退出系统 -->
        <el-row :gutter="20">
         <el-col :span="9" style="margin-top:20px;margin-left:10px;">
             退出系统：
         </el-col>
         <el-col :span="12" style="margin-top:20px;margin-left:10px;">
             <el-button type="mini" @click="logout()">退出系统</el-button>
         </el-col>
        </el-row>

        </el-drawer>
        <router-view></router-view>
    </el-main>

  </el-container>
</el-container>
</div>
</template>
<script>
export default {

  data () {

    return {
      user: {},
      role: '',
      drawer: false
    }

  },
  created () {

    // 获得角色信息
    this.role = window.sessionStorage.getItem('role')

    // 获得用户信息
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
  },
  methods: {

    // 打开隐藏抽屉
    info() {
      this.drawer = true
    },


    // 用户修改个人信息
    update() {
        this.$router.push('/user/information')
        this.drawer = false
    },

    // 用户退出系统
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/')
    },

    // 侧边栏路由功能
    routerTo(name) {
      
      // 管理员路由 1-x
     
     // 跳转到管理员管理页面
      if(name === '1-1') {
        this.$router.push('/home/admin/manager')
        return;
      }

      // 跳转到宿舍长管理页面
      if(name === '1-2') {
        this.$router.push('/home/dormitoryhead/manager')
        return;
      }

      // 跳转到老师管理页面
      if(name === '1-3') {
        this.$router.push('/home/teacher/manager')
        return;
      }

      // 跳转到宿管管理页面
      if(name === '1-4') {
        this.$router.push('/home/hoursemaster/manager')
        return;
      }

      // 跳转到学生会页面
      if(name === '1-5') {
        this.$router.push('/home/studentunion/manager')
        return;
      }

      // 跳转到宿舍页面
      if(name === '1-6') {
        this.$router.push('/home/dormitory/manager')
        return;
      }


      // 用户端登录
      if(name === '2-1' || name === '3-1' || name === '4-1' || name=== '5-1') {
        this.$router.push('/home/dormitory/user')
        return;
      }
    }
  }
}
</script>
<style>
.el-row {
  margin-bottom:15px;
}
</style>